window.onload=function(){
	window.onscroll = function(){
		//获取页面滚动的距离
		var scroll=document.body.scrollTop||document.documentElement.scrollTop
		console.log(scroll)
		if(scroll > 500){
			document.querySelector('.upward').style.display = "block"
		}else{
			document.querySelector('.upward').style.display = "none"
		}
		document.querySelector('.upward').onclick = function(){
			document.documentElement.scrollTop = 0
		}
	}	
	// ----------------------3d旋转特效--------------------------------------
	var radius = 240;
	var autoRotate = true; 
	var rotateSpeed = -60; 
	var imgWidth = 120; 
	var imgHeight = 170; 
	 
	var bgMusicURL = '';
	var bgMusicControls = true; 
	 
	// ===================== start =======================
	setTimeout(init, 100);
	 
	var obox = document.getElementById('drag-container');
	var ospin = document.getElementById('spin-container');
	var aImg = ospin.getElementsByTagName('img');
	var aVid = ospin.getElementsByTagName('video');
	var aEle = [...aImg, ...aVid]; 
	 
	ospin.style.width = imgWidth + "px";
	ospin.style.height = imgHeight + "px";
	 
	var ground = document.getElementById('ground');
	ground.style.width = radius * 3 + "px";
	ground.style.height = radius * 3 + "px";
	 
	function init(delayTime) {
	  for (var i = 0; i < aEle.length; i++) {
	    aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
	    aEle[i].style.transition = "transform 1s";
	    aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
	  }
	}
	 
	function applyTranform(obj) {
	  if(tY > 180) tY = 180;
	  if(tY < 0) tY = 0;
	 
	  obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
	}
	 
	function playSpin(yes) {
	  ospin.style.animationPlayState = (yes?'running':'paused');
	}
	 
	var sX, sY, nX, nY, desX = 0,
	    desY = 0,
	    tX = 0,
	    tY = 10;
	 
	if (autoRotate) {
	  var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
	  ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
	}
	 
	if (bgMusicURL) {
	  document.getElementById('music-container').innerHTML += `
	<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>    
	<p>If you are reading this, it is because your browser does not support the audio element.</p>
	</audio>
	`;
	}
	 
	if (mobilecheck()) {
	  // ==================== Touch Events ====================
	  document.ontouchstart = function(e) {
	    clearInterval(obox.timer);
	    e = e || window.event;
	    var sX = e.touches[0].clientX,
	        sY = e.touches[0].clientY;
	 
	    this.ontouchmove = function(e) {
	      e = e || window.event;
	      var nX = e.touches[0].clientX,
	          nY = e.touches[0].clientY;
	      desX = nX - sX;
	      desY = nY - sY;
	      tX += desX * 0.1;
	      tY += desY * 0.1;
	      applyTranform(obox);
	      sX = nX;
	      sY = nY;
	    }
	 
	    this.ontouchend = function(e) {
	      this.ontouchmove = this.ontouchend = null;
	      obox.timer = setInterval(function() {
	        desX *= 0.95;
	        desY *= 0.95;
	        tX += desX * 0.1;
	        tY += desY * 0.1;
	        applyTranform(obox);
	        playSpin(false);
	        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
	          clearInterval(obox.timer);
	          playSpin(true);
	        }
	      }, 17);
	    }
	 
	    // return false;
	  }
	} else {
	  // ==================== Mouse Events ====================
	  document.onmousedown = function(e) {
	    clearInterval(obox.timer);
	    e = e || window.event;
	    var sX = e.clientX,
	        sY = e.clientY;
	 
	    this.onmousemove = function(e) {
	      e = e || window.event;
	      var nX = e.clientX,
	          nY = e.clientY;
	      desX = nX - sX;
	      desY = nY - sY;
	      tX += desX * 0.1;
	      tY += desY * 0.1;
	      applyTranform(obox);
	      sX = nX;
	      sY = nY;
	    }
	 
	    this.onmouseup = function(e) {
	      this.onmousemove = this.onmouseup = null;
	      obox.timer = setInterval(function() {
	        desX *= 0.95;
	        desY *= 0.95;
	        tX += desX * 0.1;
	        tY += desY * 0.1;
	        applyTranform(obox);
	        playSpin(false);
	        if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
	          clearInterval(obox.timer);
	          playSpin(true);
	        }
	      }, 13);
	    }
	 
	    return false;
	  }
	  document.onmousewheel = function(e) {
	    e = e || window.event;
	    var d = e.wheelDelta / 20 || -e.detail;
	    radius += d;
	    init(1);
	  };
	}
	
	
}
window.addEventListener('load', function() {
	
	// 显示隐藏
	$(document).ready(function(){
		$('button').click(function(){
			$('.zd').fadeToggle('slow');
		});
	});
	
	
	// 1.获取元素
	var left = document.querySelector('.left')
	var right = document.querySelector('.right')
	var content = document.querySelector('.lbt')
	var contentWidth = content.offsetWidth
	// 2.鼠标经过显示左右按钮
	content.addEventListener('mouseenter', function() {
		left.style.display = 'block'
		right.style.display = 'block'
		clearInterval(timer)
		timer = null //清楚定时器变量
	})
	// 3.鼠标离开隐藏左右按钮
	content.addEventListener('mouseleave', function() {
		left.style.display = 'none'
		right.style.display = 'none'
		timer = setInterval(function() {
			// 手动调用点击事件
			right.click();
		}, 2000)
	})
	// 4.动态生成圆圈
	var ul = content.querySelector('ul')
	var ol = content.querySelector('.circle')
	for (var i = 0; i < ul.children.length; i++) {
		// 创建一个li
		var li = document.createElement('li')
		// 记录当前小圆圈的索引号，通过自定义属性来做
		li.setAttribute('index', i)
		// 插入ol
		ol.appendChild(li)
		// 排他思想
		li.addEventListener('click', function() {
			// 所有li清楚类名
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = ''
			}
			// 当前li设置current类名
			this.className = 'current'
			var index = this.getAttribute('index')
			// 当点击了某个小li，就要把这个li的索引号给num
			num = index
			// 当点击了某个小li，就要把这个li的索引号给circle
			circle = index
			// 5.点击小圆圈，移动ul
			animate(ul, -index * contentWidth)
		})
	}
	// 第一个小li设置为current
	ol.children[0].className = 'current'
	// 克隆第一张图片（li）放到ul最后面
	var first = ul.children[0].cloneNode(true)
	ul.appendChild(first)
	// 6.点击右按钮，图片滚动一张
	var num = 0
	// circle控制小圆圈的播放
	var circle = 0
	var flag = true
	// 7.右侧按钮
	right.addEventListener('click', function() {
		if (flag) {
			// 关闭节流闸
			flag = false
			if (num == ul.children.length - 1) {
				ul.style.left = 0
				num = 0
			}
			num++
			animate(ul, -num * contentWidth, function() {
				// 打开节流闸
				flag = true
			})
			circle++
			if (circle == ol.children.length) {
				circle = 0
			}
			// 调用函数
			circleChange()
		}
	})
	// 8.左侧按钮
	left.addEventListener('click', function() {
		if (flag) {
			flag = false
			if (num == 0) {
				num = ul.children.length - 1
				ul.style.left = -num * contentWidth + 'px'
			}
			num--
			animate(ul, -num * contentWidth, function() {
				flag = true
			})
			circle--
			if (circle < 0) {
				circle = ol.children.length - 1
			}
			// 调用函数
			circleChange()
		}
	})

	function circleChange() {
		// 先清除其余小圆圈的current类名
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = ''
		}
		// 留下当前的小圆圈的current类名
		ol.children[circle].className = 'current'
	}
	// 自动播放轮播图
	var timer = setInterval(function() {
		// 手动点击事件
		right.click()
	}, 2000)
	
	window.onscroll = function(){
		//获取页面滚动的距离
		var scroll=document.body.scrollTop||document.documentElement.scrollTop
		console.log(scroll)
		if(scroll > 500){
			document.querySelector('.upward').style.display = "block"
		}else{
			document.querySelector('.upward').style.display = "none"
		}
		document.querySelector('.upward').onclick = function(){
			document.documentElement.scrollTop = 0
		}
	}	
	// js百叶窗3D旋转特效
		var oList = document.getElementById("List");
		var oCSS = document.getElementById("css");
		var oBtn = document.getElementById("btns").children;
		var iW = 40;
		var shtml="";
		var scss="";
		var Lilength = oList.clientWidth / iW;
		var iZindex= 0;
		var iNow = 0;
		var aLi;
		var aLi = oList.children;
		for (var i=0;i<Lilength;i++ )
		{
			i>Lilength/2?iZindex--:iZindex++;
			shtml+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></li>';
			scss += "#List li:nth-child("+(i+1)+") a{background-position:-"+(iW*i)+"px 0}";
			scss += "#List li:nth-child("+(i+1)+"){z-index:"+iZindex+"}";
		}
		oList.innerHTML = shtml;
		oCSS.innerHTML += scss;
		for (var i=0;i<oBtn.length;i++ )
		{
			oBtn[i].index = i;
			oBtn[i].onclick = function(){
				oBtn[iNow].className = "";
				for (var i=0;i<aLi.length;i++ )
				{
					aLi[i].style.transition = "0.8s "+i*50+"ms";
					aLi[i].style.WebkitTransform="rotateX(-"+(this.index)*90+"deg)";
				}
				
				iNow = this.index;
				oBtn[iNow].className = "active";
			}
		}
	
	
})
